<style>
    .align-right {text-align: right;}
    .card-title {
        font-weight: bold;
        font-size: 18px;
        color: #333;
    }
    .goods-detail-card {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        border-radius: 6px;
        margin-bottom: 20px;
    }
    .goods-detail-card .layui-card-header {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;
        background-color: #fafafa;
        border-radius: 6px 6px 0 0;
    }
    .goods-detail-card .layui-card-body {
        padding: 20px;
    }
    .goods-img-container {
        border: 1px solid #f0f0f0;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 1px 5px rgba(0,0,0,0.05);
    }
    .goods-info {
        line-height: 2;
    }
    .goods-info p {
        margin-bottom: 10px;
    }
    .goods-info strong {
        color: #555;
        display: inline-block;
        width: 110px;
    }
    .badge {
        display: inline-block;
        padding: 3px 8px;
        font-size: 12px;
        border-radius: 3px;
        color: #fff;
    }
    .badge-success {
        background-color: #5FB878;
    }
    .badge-default {
        background-color: #d2d2d2;
        color: #666;
    }
    .reward-table {
        box-shadow: 0 1px 5px rgba(0,0,0,0.02);
    }
    .reward-table th {
        background-color: #f8f8f8;
        font-weight: bold;
        text-align: center;
    }
    .reward-table td {
        text-align: center;
    }
    .reward-value {
        color: #FF5722;
        font-weight: bold;
    }
    .reward-type {
        width: 70px;
        display: inline-block;
        text-align: right;
        color: #666;
        padding-right: 5px;
    }
    .reward-item {
        padding: 4px 0;
        border-bottom: 1px dashed #f0f0f0;
    }
    .reward-item:last-child {
        border-bottom: none;
    }
    .reward-card {
        border: 1px solid #f0f0f0;
        border-radius: 4px;
        padding: 10px;
        margin-top: 10px;
    }
    .reward-level-title {
        font-weight: bold;
        color: #333;
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid #f0f0f0;
    }
    .back-btn {
        margin-top: 20px;
    }
</style>

<div class="layui-fluid">
    <div class="layui-card goods-detail-card">
        <div class="layui-card-header">
            <span class="card-title">商品基本信息</span>
        </div>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md3">
                    <div class="goods-img-container">
                        <img src="{:img($goods_info.goods_image[0])}" alt="商品图片" width="100%">
                    </div>
                </div>
                <div class="layui-col-md9 goods-info" style="padding-left: 30px;">
                    <p><strong>商品名称：</strong>{$goods_info.goods_name}</p>
                    <p>
                        <strong>参与链动：</strong>
                        {if $goods_info.is_lian == 1}
                        <span class="badge badge-success">已参与</span>
                        {else}
                        <span class="badge badge-default">未参与</span>
                        {/if}
                    </p>
                    <p>
                        <strong>佣金规则：</strong>
                        {if $goods_info.is_rule == 1}
                        <span class="badge badge-success">自定义规则</span>
                        {else}
                        <span class="badge badge-default">默认规则</span>
                        {/if}
                    </p>
                    <p><strong>商品库存：</strong>{$goods_info.goods.goods_stock ?? 0}</p>
                    <p><strong>销售量：</strong>{$goods_info.goods.sale_num ?? 0}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-card goods-detail-card">
        <div class="layui-card-header">
            <span class="card-title">佣金规则详情</span>
        </div>
        <div class="layui-card-body">
            {foreach $goods_info.sku_list as $sku}
            <div class="layui-collapse" lay-filter="reward-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">
                        <span style="font-weight: bold; color: #333;">规格：{$sku.sku_name}</span>
                        <span style="margin-left: 20px;">价格：<span style="color: #FF5722; font-weight: bold;">￥{$sku.price}</span></span>
                        <span style="margin-left: 20px;">计算价格：<span style="color: #FF5722; font-weight: bold;">￥{$sku.commission_rules.calculate_price ?: $sku.price}</span></span>
                    </h2>
                    <div class="layui-colla-content layui-show">
                        <div class="layui-row layui-col-space15">
                            {foreach $lian_level as $level}
                            <div class="layui-col-md4">
                                <div class="reward-card">
                                    <div class="reward-level-title">{$level.level_name}</div>
                                    
                                    <!-- 调试信息 -->
                                    {php}
                                        $level_id = (string)$level['level_id'];
                                        $level_rewards = [];
                                        
                                        if (isset($sku['commission_rules']) && isset($sku['commission_rules'][$level_id])) {
                                            $level_rewards = $sku['commission_rules'][$level_id];
                                        }
                                    {/php}
                                    
                                    <!-- 直推奖显示 -->
                                    <div class="reward-item">
                                        <span class="reward-type">直推奖：</span>
                                        {if !empty($level_rewards) && isset($level_rewards['recommend_money']) && $level_rewards['recommend_money'] != '0' && $level_rewards['recommend_money'] != ''}
                                            <span class="reward-value">￥{$level_rewards.recommend_money}</span>
                                        {elseif !empty($level_rewards) && isset($level_rewards['recommend_rate']) && $level_rewards['recommend_rate'] != '0.00' && $level_rewards['recommend_rate'] != ''}
                                            <span class="reward-value">{$level_rewards.recommend_rate}%</span>
                                        {else}
                                            <span class="reward-value">￥0</span>
                                        {/if}
                                    </div>
                                    
                                    <!-- 见点奖显示 -->
                                    <div class="reward-item">
                                        <span class="reward-type">见点奖：</span>
                                        {if !empty($level_rewards) && isset($level_rewards['see_money']) && $level_rewards['see_money'] != '0' && $level_rewards['see_money'] != ''}
                                            <span class="reward-value">￥{$level_rewards.see_money}</span>
                                        {elseif !empty($level_rewards) && isset($level_rewards['see_rate']) && $level_rewards['see_rate'] != '0.00' && $level_rewards['see_rate'] != ''}
                                            <span class="reward-value">{$level_rewards.see_rate}%</span>
                                        {else}
                                            <span class="reward-value">￥0</span>
                                        {/if}
                                    </div>
                                    
                                    <!-- 培育奖显示 -->
                                    <div class="reward-item">
                                        <span class="reward-type">培育奖：</span>
                                        {if !empty($level_rewards) && isset($level_rewards['cultivate_money']) && $level_rewards['cultivate_money'] != '0' && $level_rewards['cultivate_money'] != ''}
                                            <span class="reward-value">￥{$level_rewards.cultivate_money}</span>
                                        {elseif !empty($level_rewards) && isset($level_rewards['cultivate_rate']) && $level_rewards['cultivate_rate'] != '0.00' && $level_rewards['cultivate_rate'] != ''}
                                            <span class="reward-value">{$level_rewards.cultivate_rate}%</span>
                                        {else}
                                            <span class="reward-value">￥0</span>
                                        {/if}
                                    </div>
                                </div>
                            </div>
                            {/foreach}
                        </div>
                    </div>
                </div>
            </div>
            {/foreach}
        </div>
    </div>

    <div class="layui-form-item form-wrap back-btn">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
        </div>
    </div>
</div>

<script>
    layui.use(['element', 'form'], function(){
        var element = layui.element;
        var form = layui.form;
        
        // 初始化折叠面板
        element.render('collapse');
    });
    
    function back() {
        location.hash = ns.hash("lian://shop/goods/lists");
    }
</script>